<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div th:replace="header::common_resource"></div>
</head>
<body>
<div class="demoTable">
    <input type="hidden" th:value="${checkOrderNo} + ''" name="checkOrderNo" id="checkOrderNo">
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container"></div>
</script>
<script type="text/html" id="typeIdTemplet">
    <select name="typeId" id="typeId" lay-filter="aihao">
        <option value="111" selected>111</option>
    </select>
</script>
<script type="text/html" id="statusTemplet">
    <!-- 这里的 checked 的状态只是演示 -->
</script>
<script type="text/html" id="toCreateDateFormat">
    <div>
        {{layui.util.toDateString(d.gmtCreate, 'yyyy-MM-dd HH:mm:ss')}}
    </div>
</script>
<script type="text/html" id="toModifiedDateFormat">
    <div>
        {{layui.util.toDateString(d.gmtModified, 'yyyy-MM-dd HH:mm:ss')}}
    </div>
</script>

<script>
    $(function () {
        console.log(typeof $('#checkOrderNo').val());
        console.log($('#checkOrderNo').val());
    });


    layui.use(['jquery', 'table'], function(obj){
        var $ = layui.$;
        var table = layui.table;
        var form = layui.form;

        table.render({
            elem: '#test'
            ,url:'/order/selectByOrderNo'
            ,where:{
                "orderNo": $('#checkOrderNo').val()
            }
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '用户数据表'
            ,cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'id', title:'ID', fixed: 'left'}
                    ,{field:'orderNo', title:'订单号', fixed: 'left'}
                    ,{field:'productName', title:'商品名'}
                    ,{field:'currentUnitPrice', title:'单价'}
                    ,{field:'quantity', title:'数量'}
                    ,{field:'totalPrice', title:'总价'}
                    ,{field:'gmtCreate', title:'创建时间', templet: '#toCreateDateFormat'}
                    ,{field:'gmtModified', title:'修改时间', templet: '#toModifiedDateFormat'}
                ]
            ]
            ,page: true
            ,id: 'tableId'
        });
        form.render('select');

        form.on('switch(statusLayFilter)', function(obj){
            layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
            var status = obj.elem.checked == true ? 1 : 0;
            $.post(
                '/product/updateStatus',
                {
                    'id': this.value,
                    'status': status
                },
                function (result) {
                    if (result.code == 0) {
                        mylayer.okMsg(result.msg);
                    }
                }
            );
        });

        form.on('select(typeIdTemplet)', function (data) {
            //获取当前行tr对象
            var elem = data.othis.parents('tr');
            //第一列的值是Guid，取guid来判断
            var typeId= elem.first().find('td').eq(1).text();
            //选择的select对象值；
            var selectValue = data.value;
            //这里的JsonDataInti是我自定义的table中数据的缓存数据，下拉数据修改时赋值到这一行缓存数据

            for (i = 0; i < jsonDataInit.length; i++) {
                if (jsonDataInit[i].Guid== Guid) {
                    jsonDataInit[i].NewReformStatus = selectValue; //更新被修改的行数据
                }
            }
        })

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            console.log(checkStatus);
            switch(obj.event){
                case 'deleteAll':
                    var data = checkStatus.data;
                    var orderNoes = new Array();
                    $(data).each(function () {
                        orderNoes.push(this.orderNo);
                    });
                    orderNoes = orderNoes.join(','); // 数组转字符串[2,4]->'2,4'
                    layer.confirm('真的删除所选行么', function(index){
                        $.post(
                            '/order/deleteAll',
                            {'orderNoes': orderNoes},
                            function (result) {
                                if (result.ok) {
                                    mylayer.okMsg(result.msg);
                                    // 删除后刷新表格
                                    table.reload('tableId');
                                } else {
                                    mylayer.errorMsg(result.msg);
                                }
                            },
                            'json'
                        );
                    });
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.post(
                        '/order/deleteById',
                        {'orderNo': data.orderNo},
                        function (result) {
                            if (result.ok) {
                                mylayer.okMsg(result.msg);
                                // 删除后刷新表格
                                table.reload('tableId');
                            } else {
                                mylayer.errorMsg(result.msg);
                            }
                        },
                        'json'
                    );
                });
            } else if(obj.event === 'check'){
                layer.open({
                    type: 2,
                    area: ['1500px', '750px'],
                    content: '/order/getCheckPage?orderNo=' + data.orderNo
                });
            }
        });

        var $ = layui.$, active = {
            reload: function(){
                //执行重载
                table.reload('tableId', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        name: $('#nameId').val()
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>

</body>
</html>